<template lang="pug">
  div
    v-particles.banner
      .bg
      .wrapper(v-swiper:mySwiper="swiperOption", :class='{"mobile": $store.state.view.isMobile}')
        .swiper-wrapper
          .swiper-slide(v-for="item, i in banners", :key="i")
            .con
              // h2 {{item.disc}}
              h1 {{item.content}}
              p {{item.author}} {{item.movie}}
        .swiper-pagination
    .page-body-content
      // p 网站还在制作中～ 
        nuxt-link(to="/about") 关于页面
      v-column
        .cardlist(slot='left')
          v-listcard(:item='item', v-for="item, i in listData", :key="i")

          .loadmore.active(v-if="listData.length < count", @click='loadmore') 加载更多
          .loadmore(v-else) - 这里是底线哦 -

</template>

<script>
import vParticles from '~/components/common/particles'
export default {
  components: {
    vParticles
  },
  data () {
    return {
      swiperOption: {
        effect: 'fade',
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        speed: 1000,
        pagination: {
          // el: '.swiper-pagination'
        }
      }
    }
  },

  fetch ({ store, params }) {
    store.commit('pages/SET_INDEX_PAGE', 1)
    return Promise.all([
      store.dispatch('pages/GET_INDEX_BANNERS'),
      store.dispatch('pages/GET_INDEX_LISTDATA')
    ])
  },
  computed: {
    banners () {
      return this.$store.state.pages.index.banners
    },
    pageNum () {
      return this.$store.state.pages.index.pageNum
    },
    count () {
      return this.$store.state.pages.index.count
    },
    listData () {
      return this.$store.state.pages.index.listData
    }
  },
  methods: {
    loadmore () {
      this.$store.commit('pages/SET_INDEX_PAGE', this.pageNum + 1)
      this.$store.dispatch('pages/GET_INDEX_LISTDATA')
    }
  },
  created () {
    // console.log(this)
  }
}
</script>

<style lang="stylus" scoped>
.banner
  width 100%
  height 1.5rem
  overflow hidden
  position relative
  &:hover
    .bg
      transform scale(1.07)
      filter grayscale(20%)
  .bg
    position absolute
    z-index 0
    width 100%
    height 100%
    left 0
    top 0
    background url('~/assets/img/index_bg.jpg') center center no-repeat
    background-size cover
    transition all 1s
    transform scale(1.05)
    filter grayscale(40%)

  .wrapper
    max-width $bodyWidth - .4rem
    height 1.5rem
    margin 0 auto
    // background $White
    position relative
    z-index 3
    pointer-events none
    &.mobile
      width 3.4rem
    .swiper-slide
      pointer-events none
      &.swiper-slide-active
        .con
          opacity 1
          h1
            top 0
          p
            top 0
            transform scale(.95)
      .con
        height 100%
        max-width 6rem
        margin 0 auto
        opacity 0
        display flex
        flex-flow column nowrap
        align-items center
        justify-content center
        h1
          font-size .16rem
          line-height 1.5
          color $White
          text-align center
          position relative
          transition top .5s ease
          top .2rem
        p
          margin-top .1rem
          color $White
          position relative
          transition all .5s ease
          top .1rem
          transform scale(.5)

</style>
